<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>座位管理 - 图书馆管理系统</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <div class="admin-container">
        <!-- 左侧边栏 -->
        <aside class="sidebar">
            <div class="sidebar-header">
                <h1 class="logo">
                    <i class="fas fa-book"></i>
                    <span>图书馆管理系统</span>
                </h1>
            </div>
            <nav class="sidebar-nav">
                <ul>
                    <li class="nav-item">
                        <a href="index.html" class="nav-link">
                            <i class="fas fa-tachometer-alt"></i>
                            <span>系统概览</span>
                        </a>
                    </li>
                    <li class="nav-item active">
                        <a href="seat-management.html" class="nav-link">
                            <i class="fas fa-chair"></i>
                            <span>座位管理</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="booking-management.html" class="nav-link">
                            <i class="fas fa-calendar-alt"></i>
                            <span>预约管理</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="user-management.html" class="nav-link">
                            <i class="fas fa-users"></i>
                            <span>用户管理</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="data-analysis.html" class="nav-link">
                            <i class="fas fa-chart-bar"></i>
                            <span>数据分析</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="report-statistics.html" class="nav-link">
                            <i class="fas fa-file-alt"></i>
                            <span>报表统计</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="system-settings.html" class="nav-link">
                            <i class="fas fa-cog"></i>
                            <span>系统设置</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </aside>

        <!-- 主内容区 -->
        <main class="main-content">
            <!-- 顶部导航栏 -->
            <header class="top-navbar">
                <div class="navbar-left">
                    <button class="menu-toggle" id="menuToggle">
                        <i class="fas fa-bars"></i>
                    </button>
                    <h2 class="page-title">座位管理</h2>
                </div>
                <div class="navbar-right">
                    <div class="search-box">
                        <input type="text" placeholder="搜索...">
                        <i class="fas fa-search"></i>
                    </div>
                    <div class="notification">
                        <i class="fas fa-bell"></i>
                        <span class="badge">3</span>
                    </div>
                    <div class="user-profile">
                        <img src="assets/avatar-admin.png" alt="管理员头像">
                        <span>管理员</span>
                    </div>
                </div>
            </header>

            <!-- 座位管理内容 -->
            <div class="seat-management">
                <!-- 工具栏 -->
                <div class="toolbar">
                    <div class="filter-container">
                        <div class="filter-item">
                            <label>楼层:</label>
                            <select class="form-control">
                                <option value="all">全部楼层</option>
                                <option value="1">1楼</option>
                                <option value="2">2楼</option>
                                <option value="3">3楼</option>
                                <option value="4">4楼</option>
                                <option value="5">5楼</option>
                            </select>
                        </div>
                        <div class="filter-item">
                            <label>区域:</label>
                            <select class="form-control">
                                <option value="all">全部区域</option>
                                <option value="A">A区</option>
                                <option value="B">B区</option>
                                <option value="C">C区</option>
                                <option value="D">D区</option>
                                <option value="E">E区</option>
                            </select>
                        </div>
                        <div class="filter-item">
                            <label>状态:</label>
                            <select class="form-control">
                                <option value="all">全部状态</option>
                                <option value="available">可用</option>
                                <option value="occupied">占用</option>
                                <option value="maintenance">维护中</option>
                                <option value="disabled">已禁用</option>
                            </select>
                        </div>
                        <div class="filter-item">
                            <label>类型:</label>
                            <select class="form-control">
                                <option value="all">全部类型</option>
                                <option value="normal">普通座位</option>
                                <option value="study-room">研讨室</option>
                                <option value="computer">电脑座位</option>
                                <option value="silent">静音区</option>
                            </select>
                        </div>
                    </div>
                    <div class="action-buttons">
                        <button class="btn btn-primary">
                            <i class="fas fa-plus"></i> 新增座位
                        </button>
                        <button class="btn btn-outline">
                            <i class="fas fa-download"></i> 导出数据
                        </button>
                        <button class="btn btn-outline">
                            <i class="fas fa-refresh"></i> 刷新
                        </button>
                    </div>
                </div>

                <!-- 座位表格 -->
                <div class="card">
                    <div class="card-header">
                        <h3>座位列表</h3>
                        <div class="table-info">
                            <span>共 1,256 个座位</span>
                        </div>
                    </div>
                    <div class="table-container">
                        <table class="data-table" id="seatTable">
                            <thead>
                                <tr>
                                    <th><input type="checkbox"></th>
                                    <th>座位号</th>
                                    <th>区域</th>
                                    <th>楼层</th>
                                    <th>类型</th>
                                    <th>状态</th>
                                    <th>使用率</th>
                                    <th>最后维护</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>A101</td>
                                    <td>A区</td>
                                    <td>1楼</td>
                                    <td>普通座位</td>
                                    <td><span class="status active">可用</span></td>
                                    <td>92%</td>
                                    <td>2023-10-15</td>
                                    <td>
                                        <button class="action-btn view">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                        <button class="action-btn edit">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button class="action-btn delete">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>A102</td>
                                    <td>A区</td>
                                    <td>1楼</td>
                                    <td>普通座位</td>
                                    <td><span class="status pending">占用</span></td>
                                    <td>88%</td>
                                    <td>2023-10-15</td>
                                    <td>
                                        <button class="action-btn view">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                        <button class="action-btn edit">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button class="action-btn delete">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>B203</td>
                                    <td>B区</td>
                                    <td>2楼</td>
                                    <td>电脑座位</td>
                                    <td><span class="status active">可用</span></td>
                                    <td>85%</td>
                                    <td>2023-10-12</td>
                                    <td>
                                        <button class="action-btn view">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                        <button class="action-btn edit">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button class="action-btn delete">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>C305</td>
                                    <td>C区</td>
                                    <td>3楼</td>
                                    <td>静音区</td>
                                    <td><span class="status warning">维护中</span></td>
                                    <td>78%</td>
                                    <td>2023-10-18</td>
                                    <td>
                                        <button class="action-btn view">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                        <button class="action-btn edit">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button class="action-btn delete">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>D402</td>
                                    <td>D区</td>
                                    <td>4楼</td>
                                    <td>研讨室</td>
                                    <td><span class="status expired">已禁用</span></td>
                                    <td>65%</td>
                                    <td>2023-10-01</td>
                                    <td>
                                        <button class="action-btn view">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                        <button class="action-btn edit">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button class="action-btn delete">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="card-footer">
                        <div class="pagination">
                            <ul>
                                <li><a href="#">上一页</a></li>
                                <li><a href="#" class="active">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">4</a></li>
                                <li><a href="#">5</a></li>
                                <li><a href="#">下一页</a></li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- 座位分布图 -->
                <div class="card">
                    <div class="card-header">
                        <h3>座位分布图</h3>
                        <div class="map-controls">
                            <select class="form-control">
                                <option value="1">1楼</option>
                                <option value="2">2楼</option>
                                <option value="3">3楼</option>
                                <option value="4">4楼</option>
                                <option value="5">5楼</option>
                            </select>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="seat-map">
                            <!-- 这里可以放置座位分布的可视化图表 -->
                            <div class="map-placeholder">
                                <p>楼层座位分布地图加载中...</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <script src="js/main.js"></script>
    <script src="js/seat-management.js"></script>
</body>
</html>